<!-- 放箱费维护 -->
<template>
  <div class="boxing-fee-dialog">
    <el-dialog
      width="900px"
      class=""
      top="6vh"
      title="放箱费维护"
      :visible="$store.state.dialog.boxing"
      @close="close">
      <el-row>
        <el-col :span="24">
          <el-card shadow="hover">
            <el-form :model="order" res="order" label-width="100px" size="mini">
              <el-row>
                <el-col :span="8">
                  <el-button type="success" size="mini" @click="copyCost" icon="el-icon-document-copy">复制费用</el-button>
                </el-col>
                <el-col :span="8">
                  &nbsp;
                  <!-- <el-select v-if="importExport === 2" size="mini" filterable v-model="order.yardid" @change="setYardship" placeholder="请选择关联堆场">
                    <el-option v-for="item in yardList" :key="item.id" :label="item.yardName" :value="item.yardId"></el-option>
                  </el-select> -->
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-input v-model="order.serchof" @input="searchYard" placeholder="搜索"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-table
              border
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(255, 255, 255, 0.5)"
              :data="yardData"
              style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-table
                    border
                    :cell-style="feeRowClass"
                    @cell-click="setyardFees"
                    :data="props.row.yardFee"
                    style="width: 100%">
                    <el-table-column
                      label="类型"
                      prop="boxType"
                      align="center">
                    </el-table-column>
                    <el-table-column
                      label="20"
                      align="center">
                      <el-table-column
                        label="收入"
                        align="center">
                        <template slot-scope="scope">
                          <el-popover trigger="click" :ref="scope.row.boxType" placement="top" width="300">
                            <el-input size="mini" style="width: 60%" v-model="myFee120z"></el-input>
                            <div style="text-align: right; margin: 0; display: inline-block;">
                              <el-button size="mini" type="primary" icon="el-icon-check" @click="setYardFee(scope, scope.row, props.row, 0)"></el-button>
                              <el-button size="mini" icon="el-icon-close" @click="cancelCol1(scope.row.boxType)"></el-button>
                            </div>
                            <div slot="reference" class="name-wrapper">
                              {{scope.row.income20 || '-'}}
                            </div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="支出"
                        align="center">
                        <template slot-scope="scope">
                          <el-popover :ref="`popover-${scope.$index}`"  trigger="click" placement="top" width="300">
                            <el-input size="mini" style="width: 60%" v-model="myFee120c"></el-input>
                            <div style="text-align: right; margin: 0; display: inline-block;">
                              <el-button size="mini" type="primary" icon="el-icon-check" @click="setYardFee(scope, scope.row, props.row, 1)"></el-button>
                              <el-button size="mini" icon="el-icon-close" @click="shutDown(scope)"></el-button>
                            </div>
                            <div slot="reference">
                              {{scope.row.expend20 || '-'}}
                            </div>
                          </el-popover>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column
                      label="40"
                      align="center">
                      <el-table-column
                        label="收入"
                        align="center">
                        <template slot-scope="scope">
                          <el-popover :ref="scope.row.boxTypeId"  trigger="click" placement="top" width="300">
                            <el-input size="mini" style="width: 60%" v-model="myFee140z"></el-input>
                            <div style="text-align: right; margin: 0; display: inline-block;">
                              <el-button size="mini" type="primary" icon="el-icon-check" @click="setYardFee(scope, scope.row, props.row, 2)"></el-button>
                              <el-button size="mini" icon="el-icon-close" @click="cancelCol1(scope.row.boxTypeId)"></el-button>
                            </div>
                            <div slot="reference">
                              {{scope.row.income40 || '-'}}
                            </div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="支出"
                        align="center">
                        <template slot-scope="scope">
                          <el-popover :ref="scope.row.yardFeeId"  trigger="click" placement="top" width="300">
                            <el-input size="mini" style="width: 60%" v-model="myFee140c"></el-input>
                            <div style="text-align: right; margin: 0; display: inline-block;">
                              <el-button size="mini" type="primary" icon="el-icon-check" @click="setYardFee(scope, scope.row, props.row, 3)"></el-button>
                              <el-button size="mini" icon="el-icon-close" @click="cancelCol1(scope.row.yardFeeId)"></el-button>
                            </div>
                            <div slot="reference">
                              {{scope.row.expend40 || '-'}}
                            </div>
                          </el-popover>
                        </template>
                      </el-table-column>
                    </el-table-column>
                    <el-table-column
                      label="45"
                      align="center">
                      <el-table-column
                        label="收入"
                        align="center">
                        <template slot-scope="scope">
                          <el-popover :ref="scope.row.id1"  trigger="click" placement="top" width="300">
                            <el-input size="mini" style="width: 60%" v-model="myFee145z"></el-input>
                            <div style="text-align: right; margin: 0; display: inline-block;">
                              <el-button size="mini" type="primary" icon="el-icon-check" @click="setYardFee(scope, scope.row, props.row, 4)"></el-button>
                              <el-button size="mini" icon="el-icon-close" @click="cancelCol1(scope.row.id1)"></el-button>
                            </div>
                            <div slot="reference">
                              {{scope.row.income45 || '-'}}
                            </div>
                          </el-popover>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="支出"
                        align="center">
                        <template slot-scope="scope">
                          <el-popover :ref="scope.row.id2"  trigger="click" placement="top" width="300">
                            <el-input size="mini" style="width: 60%" v-model="myFee145c"></el-input>
                            <div style="text-align: right; margin: 0; display: inline-block;">
                              <el-button size="mini" type="primary" icon="el-icon-check" @click="setYardFee(scope, scope.row, props.row, 5)"></el-button>
                              <el-button size="mini" icon="el-icon-close" @click="cancelCol1(scope.row.id2)"></el-button>
                            </div>
                            <div slot="reference">
                              {{scope.row.expend45 || '-'}}
                            </div>
                          </el-popover>
                        </template>
                      </el-table-column>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="yardName"
                label="堆场">
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  yardComList,
  setYardFee,
  importYardComList,
  copyCost,
  importSetYardFee, // 设置进口堆场
  setShipComYard
} from '../api/finance'
export default {
  data () {
    return {
      order: {
        yardid: '',
        serchof: '' // 搜索
      },
      myFee120z: '', // 费用
      myFee120c: '',
      myFee140z: '',
      myFee140c: '',
      myFee145z: '',
      myFee145c: '',
      myData: [],
      loading: true,
      yardData: []
    }
  },
  watch: {
    '$store.state.dialog.boxing' (value) {
      if (this.importExport === 2 && value) {
        this.getYardComList()
      } else if (this.importExport === 1 && value) {
        this.getImportYardComList()
      }
    }
  },
  props: {
    yardList: {
      type: Array,
      default: () => {
        return []
      }
    },
    customerid: {
      type: String,
      default: () => {
        return ''
      }
    },
    yardCom: {
      type: Object,
      default: () => {
        return {}
      }
    },
    importExport: {
      type: Number,
      default: () => {
        return ''
      }
    },
    shipId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  methods: {
    close () {
      this.$store.commit('hide_boxing_fee_dialog')
    },
    // 获取船公司下堆场列表
    async getYardComList () {
      console.log(this.yardCom, 'this.yardCom')
      const res = await yardComList({
        shipComId: this.yardCom.boatComId,
        customerId: this.customerid,
        shipAgencyId: this.shipId // 船代ID
      })
      if (res.status === 200) {
        this.yardData = res.data // 船公司下堆场列表
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 获取进口船公司下堆场列表
    async getImportYardComList () {
      console.log(this.yardCom, '进口this.yardCom')
      const res = await importYardComList({
        shipComId: this.yardCom.boatComId,
        customerId: this.customerid,
        shipAgencyId: this.shipId // 船代ID
      })
      if (res.status === 200) {
        this.yardData = res.data // 船公司下堆场列表
        this.loading = false
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
        this.loading = false
      }
    },
    // 复制费用
    async copyCost () {
      const res = await copyCost({
        shipComId: this.yardCom.boatComId,
        yardId: this.yardData[0].yardId,
        customerId: this.customerid
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    feeRowClass ({row, column, rowIndex, columnIndex}) {
      if (column.label === '收入' || column.label === '支出') {
        return 'color: #3c8dbc'
      }
    },
    async judgingRegularity (numb, scope, row, pow, tp) {
      const reg = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/
      if (reg.test(numb)) {
        const res = await setYardFee({
          boatComId: pow.boatComId,
          yardId: pow.yardId,
          yardFeeId: row.yardFeeId,
          boxTypeId: row.boxTypeId,
          fee: numb,
          feeType: tp,
          customerId: this.customerid,
          shipAgencyId: this.shipId
        })
        if (res.status === 200) {
          this.$notify({
            title: '成功',
            message: res.msg,
            type: 'success'
          })
          switch (tp) {
            case 0:
              row.income20 = this.myFee120z
              this.cancelCol1(row.boxType)
              break
            case 1:
              row.expend20 = this.myFee120c
              this.shutDown(scope)
              break
            case 2:
              row.income40 = this.myFee140z
              this.cancelCol1(row.boxTypeId)
              break
            case 3:
              row.expend40 = this.myFee140c
              this.cancelCol1(row.yardFeeId)
              break
            case 4:
              row.income45 = this.myFee145z
              this.cancelCol1(row.id1)
              break
            case 5:
              row.expend45 = this.myFee145c
              this.cancelCol1(row.id2)
              break
          }
        } else {
          this.$notify({
            title: '错误',
            message: res.msg,
            type: 'error'
          })
        }
      } else {
        this.$message({
          message: '请输入正确的费用格式',
          type: 'warning'
        })
        return false
      }
    },
    // 设置进口堆场费用
    async importjudgingRegularity (numb, scope, row, pow, tp) {
      const reg = /(^([-]?)[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^([-]?)(0){1}$)|(^([-]?)[0-9]\.[0-9]([0-9])?$)/
      if (reg.test(numb)) {
        const res = await importSetYardFee({
          boatComId: pow.boatComId,
          yardId: pow.yardId,
          yardFeeId: row.yardFeeId,
          boxTypeId: row.boxTypeId,
          fee: numb,
          feeType: tp,
          customerId: this.customerid,
          shipAgencyId: this.shipId
        })
        if (res.status === 200) {
          this.$notify({
            title: '成功',
            message: res.msg,
            type: 'success'
          })
          switch (tp) {
            case 0:
              row.income20 = this.myFee120z
              this.cancelCol1(row.boxType)
              break
            case 1:
              row.expend20 = this.myFee120c
              this.shutDown(scope)
              break
            case 2:
              row.income40 = this.myFee140z
              this.cancelCol1(row.boxTypeId)
              break
            case 3:
              row.expend40 = this.myFee140c
              this.cancelCol1(row.yardFeeId)
              break
            case 4:
              row.income45 = this.myFee145z
              this.cancelCol1(row.id1)
              break
            case 5:
              row.expend45 = this.myFee145c
              this.cancelCol1(row.id2)
              break
          }
        } else {
          this.$notify({
            title: '错误',
            message: res.msg,
            type: 'error'
          })
        }
      } else {
        this.$message({
          message: '请输入正确的费用格式',
          type: 'warning'
        })
        return false
      }
    },
    // 设置堆场费用
    setYardFee (scope, row, pow, tp) {
      if (this.importExport === 2) {
        switch (tp) {
          case 0:
            this.judgingRegularity(this.myFee120z, scope, row, pow, tp)
            break
          case 1:
            this.judgingRegularity(this.myFee120c, scope, row, pow, tp)
            break
          case 2:
            this.judgingRegularity(this.myFee140z, scope, row, pow, tp)
            break
          case 3:
            this.judgingRegularity(this.myFee140c, scope, row, pow, tp)
            break
          case 4:
            this.judgingRegularity(this.myFee145z, scope, row, pow, tp)
            break
          case 5:
            this.judgingRegularity(this.myFee145c, scope, row, pow, tp)
            break
        }
      }
      if (this.importExport === 1) {
        switch (tp) {
          case 0:
            this.importjudgingRegularity(this.myFee120z, scope, row, pow, tp)
            break
          case 1:
            this.importjudgingRegularity(this.myFee120c, scope, row, pow, tp)
            break
          case 2:
            this.importjudgingRegularity(this.myFee140z, scope, row, pow, tp)
            break
          case 3:
            this.importjudgingRegularity(this.myFee140c, scope, row, pow, tp)
            break
          case 4:
            this.importjudgingRegularity(this.myFee145z, scope, row, pow, tp)
            break
          case 5:
            this.importjudgingRegularity(this.myFee145c, scope, row, pow, tp)
            break
        }
      }
    },
    shutDown (scope) {
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },
    // 关闭
    cancelCol1 (boxType) {
      this.$refs[boxType].doClose()
      this.myFee = ''
    },
    // 点击堆场费
    setyardFees (row, column, cell, event) {
      if (column.label === '收入') {
        this.myFee120z = row.income20
        this.myFee120c = row.expend20
        this.myFee140z = row.income40
        this.myFee140c = row.expend40
        this.myFee145z = row.income45
        this.myFee145c = row.expend45
      } else if (column.label === '支出') {
        this.myFee120z = row.income20
        this.myFee120c = row.expend20
        this.myFee140z = row.income40
        this.myFee140c = row.expend40
        this.myFee145z = row.income45
        this.myFee145c = row.expend45
      }
    },
    // 设置船公司和堆场关联
    async setYardship () {
      const res = await setShipComYard({
        shipComId: this.yardCom.boatComId,
        yardId: this.order.yardid
      })
      if (res.status === 200) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.getYardComList(this.yardCom)
      } else {
        this.$notify({
          title: '错误',
          message: res.msg,
          type: 'error'
        })
      }
    },
    // 搜索
    searchYard () {
      let search = this.order.serchof.toUpperCase()
      let arr = []
      if (search === '') {
        this.getYardComList(this.yardCom)
        return false
      }
      this.yardData.map(item => {
        if (item.yardName.indexOf(search) !== -1) {
          arr.push(item)
        }
      })
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
          }
        }
      }
      this.yardData = arr
    }
  }
}
</script>

<style scoped lang="less">

</style>
